<template>
    <div class="bottom_router">
        <div class="bottom_tab" @click="bottom_router(0, '/Home_Page-Home_video')">首页</div>
        <div class="bottom_tab" @click="bottom_router(1, '/Home_Page-Home_watch')">关注</div>
        <div @click="post_video" class="bottom_tab">
            <div class="bottom_router_center">
                <div class="shu"></div>
                <div class="heng"></div>
            </div>
        </div>
        <div class="bottom_tab" @click="bottom_router(3, '/Home_Page-Home_messge')">消息</div>
        <div class="bottom_tab" @click="bottom_router(4, '/Home_Page-Home_my')">我</div>
        <span :style="{ left: left / (390 / 10) + 'rem', }"></span>
    </div>
</template>

<script setup>
import { defineEmits, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
let router_index = ref(0)
const router = useRouter()
onMounted(() => {
    switch (router.currentRoute.value.path) {
        case '/Home_Page-Home_video':
            text(0)
            break;
        case '/Home_Page-Home_watch':
            text(1)
            break;
        case '/Home_Page-Home_messge':
            text(3)
            break;
        case '/Home_Page-Home_my':
            text(4)
            break;
    }
})
let left = ref()
const emit = defineEmits(['text_router'])
function text(index) {
    let arr = document.querySelectorAll('.bottom_tab')
    left.value = 78 * index + (78 / 2)
    arr[index].style = 'color:#fff;'
    router_index.value = index
    arr.forEach(item => {
        item.style = 'color: rgba(255, 255, 255, 0.3);'
    })
}
function bottom_router(index, path) {
    if (router_index.value == index) return
    text(index)
    let arr = document.querySelectorAll('.bottom_tab')
    arr[index].style = `color: rgba(255, 255, 255, 0.8) ;`
    emit('text_router', path)
}
function post_video() {
    emit('text_router', 'post_video')
}
</script>

<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.bottom_router {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    height: r(55);
    width: 100%;
    background-color: #000;
    display: flex;
    border-top: 2px solid #ffffff72;
    justify-content: space-evenly;

    span {
        position: absolute;
        width: r(26);
        height: r(3);
        background-color: #ffffffca;
        bottom: r(12);
        left: 0;
        border-radius: r(5);
        transition: all 0.5s;
        margin-left: r(-13);
    }

    div {
        position: relative;
        flex: 1;
        font-size: r(16);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        transition: all 0.5s;
    }

    .bottom_router_center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: r(50);
        height: r(30);
        border: r(3) solid #fff;
        border-radius: r(8);

        .shu,
        .heng {
            position: absolute;
            width: r(3);
            background-color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: r(10);
        }

        .heng {
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }
}

.toum {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.toum2 {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(134, 134, 134, 0.3) !important;
}
</style>